<template>
	<view class="topBar">
		<u-search placeholder="搜索关键词" v-model="keyword" @change="searchTextChange" @search="search" :clearabled="true"
			:showAction="false">
		</u-search>
	</view>
	<list reqUrl="/api/qpickpoint" :reqData="reqData" emptyText="暂无自提地点" :empty-img="addressEmpty" ref="listInstance"
		:immediatecheck="false">
		<template v-slot=" { list }">
			<view class="list_c">
				<view v-for="(item, index) in list" :key="item.pick_id" @click="back(item)" class="address">
					<view class="head">
						<text class="shop_name">{{ item.shop_name }}</text>
						<text>{{ item.shop_tel }}</text>
					</view>
					<view class="addr">
						<text>{{ item.province }}</text>
						<text>{{ item.city }}</text>
						<text>{{ item.area }}</text>
						<text>{{ item.shop_address }}</text>
					</view>
					<view class="bottom_bar">
						<view class="distance">
							<uni-icons type="location" size="19"></uni-icons>
							距您{{item.distance}}
						</view>
						<view class="button center" hover-class="tapstate">选择</view>
					</view>
				</view>
			</view>
		</template>
	</list>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import addressEmpty from '/static/image/address-empty.png';
	import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
	import { useCacheStore } from '@/store/modules/useCacheStore';
	import { useGetThemColor } from '@/hooks/useGetThemColor';
	import { getLocation } from '@/utils/common/index.js';
	import request from '@/utils/common/request/index';

	const { primaryColor } = useGetThemColor();
	const listInstance = ref(null);

	let reqData = {
		now_lng: '',
		now_lat: '',
		shop_name: '',
	};

	const handleGetLocation = () => {
		return new Promise(resolve => {
			getLocation(request).then(latInfo => {
				reqData.now_lat = latInfo.latitude;
				reqData.now_lng = latInfo.longitude;
				listInstance.value.resetRequest();
				resolve();
			})
		})
	}

	onMounted(() => {
		handleGetLocation();
	})

	const keyword = ref('');
	const searchTextChange = (value) => {
		reqData.shop_name = value;
		if (value === '') {
			listInstance.value.resetRequest();
		}
	};
	const search = () => {
		listInstance.value.resetRequest();
	};

	/**下拉刷新事件 */
	onPullDownRefresh(() => {
		handleGetLocation().then(() => {
			uni.stopPullDownRefresh();
		})
	});
	// * 页面触底事件，不能删除，否则不能触发list组件触底事件
	onReachBottom(() => {});

	// * 选择自提地址
	const back = address => {
		const cacheStore = useCacheStore();
		cacheStore.setStorageData({
			data: address,
			field: 'pickAddressStorage',
		})
		uni.navigateBack();
	};
</script>

<style scoped lang="scss">
	.topBar {
		position: sticky;
		top: 0;
		z-index: 9;
		padding: 10px 14px;
		background-color: #fff;
	}

	.list_c {
		padding: 14px 14px 0;
	}

	.address {
		margin-bottom: 10px;
		padding: 10px 14px 0;
		background-color: #fff;
		overflow: hidden;
		border-radius: 5px;

		.head {
			font-size: 16px;
			font-weight: bold;
			color: #000;
			line-height: 24px;

			.shop_name {
				margin-right: 30px;
			}
		}

		.addr {
			margin: 3px 0 10px 0;
			font-size: 14px;
			color: #666666;

			span {
				margin-right: 4px;
			}
		}

		.bottom_bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px 0;
			border-top: 1px solid #f6f6f6;

			.distance {
				display: flex;
				align-items: center;
			}

			.button {
				width: 60px;
				height: 30px;
				background-color: v-bind(primaryColor);
				font-size: 12px;
				color: #fff;
				border-radius: 20px;
			}
		}
	}
</style>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>